<template>
  <div class="edit_profile">
    <!-- 头部 -->
    <myheader title="个人编辑信息">
      <template #left>
        <van-icon name="arrow-left" />
      </template>
      <template #right>
        <van-icon name="wap-home-o" />
      </template>
    </myheader>
    <!-- 上传头像 -->
    <div class="uploadImg">
      <!-- 放置一个图片标签，用来显示头像 -->
      <img :src="userinfo.head_img" alt="" />
      <!-- 使用vant的上传头像组件，但需要更改样式：使这个组件用定位的方法呈现在图片标签的上方，并把透明度更改成0，变透明，就会只显示图片出来 -->
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 用户信息单元格cell .native:监听组件根元素的原生事件,刚好单元格就只有一个根元素正好合适-->
    <!-- 昵称模块 -->
    <mycell
      title="昵称"
      :desc="userinfo.nickname"
      @click.native="showNicknameDialog"
    >
    </mycell>
    <!-- 编辑昵称模态框 -->
    <van-dialog
      v-model="shownick"
      title="编辑昵称"
      show-cancel-button
      @confirm="editNickname"
    >
      <van-field
        v-model="nickname"
        label="昵称"
        required
        placeholder="请输入用户名"
      />
    </van-dialog>

    <!-- 密码模块 -->
    <mycell
      title="密码"
      desc="******"
      @click.native="
        showpw = !showpw;
        oldPassword = newPassword = '';
      "
    ></mycell>
    <!-- 编辑密码模态框 -->
    <van-dialog
      v-model="showpw"
      title="编辑密码"
      show-cancel-button
      @confirm="updatePassword"
      :before-close="beforeClose"
    >
      <van-field
        v-model.trim="oldPassword"
        label="原密码"
        required
        placeholder="请输入原密码"
      />
      <van-field
        v-model.trim="newPassword"
        label="新密码"
        required
        placeholder="请输入新密码"
      />
    </van-dialog>

    <!-- 性别 -->
    <mycell
      title="性别"
      :desc="userinfo.gender == 1 ? '男' : '女'"
      @click.native="showGender = !showGender"
    ></mycell>

    <van-action-sheet
      v-model="showGender"
      :actions="actions"
      @select="onSelect"
      close-on-click-action
    />
  </div>
</template>

<script>
import myheader from "@/components/myheader";
import mycell from "@/components/mycell";
import { uploadFile } from "@/apis/fileUpload";
import { userDetails, updateUserInfo } from "@/apis/user";
import axios from "../../utils/request";
export default {
  data() {
    return {
      id: "",
      userinfo: {},
      // 存放更改 昵称 的显示与隐藏的布尔值变量
      shownick: false,
      // 昵称 所对应的变量
      nickname: "",
      // 存放更改 密码 的显示与隐藏的布尔值变量
      showpw: false,
      // 旧密码 所对应的变量
      oldPassword: "",
      // 新密码 所对应的变量
      newPassword: "",
      // 存放更改 性别 的显示与隐藏的布尔值变量
      showGender: false,
      // 性别的选项
      actions: [{ name: "男" }, { name: "女" }],
    };
  },
  components: {
    mycell,
    myheader,
  },
  methods: {
    // 头像上传方法
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let fd = new FormData();
      fd.append("file", file.file);
      // 上传头像至服务器
      uploadFile(fd)
        .then((res) => {
          console.log(res);
          if (res.data.message == "文件上传成功") {
            // console.log(res.data.data.url)
            // 发送请求返回的数据有一个url地址，就是图片的地址，通过拼接基础路径和返回的路径，就能得到图片路径
            this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url;
            // 上传成功后，发送请求更新用户信息
            updateUserInfo(this.id, { head_img: res.data.data.url })
              .then((res) => {
                console.log(res);
                if (res.data.message == "修改成功") {
                  this.$toast.success(res.data.message);
                } else {
                  this.$toast.fail(res.data.message);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showNicknameDialog() {
      console.log(1);
      this.shownick = !this.shownick;
      this.nickname = this.userinfo.nickname;
    },
    // 更改昵称
    editNickname() {
      updateUserInfo(this.id, { nickname: this.nickname })
        .then((res) => {
          console.log(res);
          if (res.data.message == "修改成功") {
            this.$toast.success(res.data.message);
            this.userinfo.nickname = this.nickname;
          } else {
            this.$toast.fail(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 更改密码
    updatePassword() {
      if (this.userinfo.password === this.oldPassword) {
        // 判断新密码用户输入的 是不是在3~16为之间的密码，如果在这个范围就执行
        if (/^.{3,16}$/.test(this.newPassword)) {
          updateUserInfo(this.id, { password: this.newPassword })
            .then((res) => {
              console.log(res);
              if (res.data.message == "修改成功") {
                this.$toast.success(res.data.message);
                this.userinfo.password = this.newPassword;
              } else {
                this.$toast.fail(res.data.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$toast.fail("请输入3~16位的新密码");
        }
      } else {
        this.$toast.fail("原密码错误！");
      }
    },
    // 关闭弹出框前的判断：1、用户输入的原密码是否对   2、新密码的长度是否在3~16位之间
    // done():关闭弹窗  done(false)：阻止关闭弹窗
    beforeClose(action, done) {
      // console.log(action, done);
      // action:点击的动作，点击确认就是confirm，done就是
      // 判断：如果用户点击的是确认键，就需要判断原密码与新密码的正确性
      if (action == "confirm") {
        // 判断原密码跟发送请求拿到的密码是否一致
        if (
          this.userinfo.password != this.oldPassword ||
          !/^.{3,16}$/.test(this.newPassword)
        ) {
          done(false);
        } else {
          done();
        }
      } else {
        //如果不是点确定键，就可以关闭弹窗
        done();
      }
    },
    // 选性别
    async onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起

      let gender = item.name == "男" ? 1 : 0;
      try {
        let res = await updateUserInfo(this.id, { gender });
        console.log(res);
        if (res.data.message == "修改成功") {
          this.$toast.success(res.data.message);
          this.userinfo.gender = gender;
        } else {
          this.$toast.fail(res.data.message);
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
  //页面加载就渲染数据
  mounted() {
    console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    userDetails(this.id)
      .then((res) => {
        console.log(res);
        if (res.data.message == "获取成功") {
          // 渲染数据，在data中定义一个对象用来接收获取到的数据
          this.userinfo = res.data.data;
          // 图片的地址是个绝对地址，需要手动添加服务器地址，在这里设置的原因：重新设置图片地址，渲染的时候就不用重新拼接
          this.userinfo.head_img =
            axios.defaults.baseURL + this.userinfo.head_img;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="less" scoped>
.uploadImg {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 20px auto;
  img {
    width: 100%;
    height: 100%;
  }
  // 深度作用选择器：让父组件的样式影响子组件
  /deep/ .van-uploader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  // 在父组件中修改子组件样式，需要增加>>>或/deep/或::v-deep  进行穿透
  /deep/ .van-uploader__upload {
    width: 90px;
    height: 90px;
  }
}
</style>